<template>
  <div class="f-con">
    <div class="l-margin">
      <div class="f-zi">培训管理</div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="f-inp1">
          <!-- <div class="l-input"> -->
          <el-form-item label="公司名称">
            <el-select v-model="formInline.company_id" placeholder="全部">
              <el-option
                v-for="item in linput1"
                :key="item.company_id"
                :label="item.company_name"
                :value="item.company_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="培训种类">
            <el-select v-model="formInline.type_id" placeholder="全部">
              <el-option
                v-for="item in linput2"
                :key="item.type_id"
                :label="item.type_name"
                :value="item.type_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- </div> -->
        </div>
      </el-form>
      <div class="rygl-btn">
        <div class="rygl-btn-left">
          <el-button type="primary" @click="search(formInline)">搜索</el-button>
          <el-button @click="reset(formInline)">重置</el-button>
         
        </div>
        <div class="rygl-btn-right">
          <el-button type="primary" @click="addpx()">新增</el-button>
         
        </div>
      </div>
      <!-- 表格部分 -->
      <div class="l-pei-biao">
        <el-table
          :border="true"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          ref="multipleTable"
          :data="currList"
          tooltip-effect="dark"
          style="width: 98%, text-align: center "
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
           
             show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            label="举办单位"
            prop="buildCompany.company_name"
             show-overflow-tooltip
          
            hight="30px"
            align="center"
          ></el-table-column>
          <el-table-column
            label="培训类型"
            prop="buildTrainType.type_name"
             show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column 
          label="培训标题" 
          prop="train_title"
          
           show-overflow-tooltip 
          align="center">
          </el-table-column>
          <el-table-column
            label="开始时间"
            prop="train_start"
             show-overflow-tooltip
          
            align="center"
          ></el-table-column>
          <el-table-column
            label="结束时间"
            prop="train_end"
             show-overflow-tooltip
             align="center"
          >
          </el-table-column>
         <el-table-column label="操作"  width="160px"  align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

     
    </div>
     <div class="f-fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="tableData.length"
          :page-size="pageSize"
          @current-change="changePage"
        ></el-pagination>
      </div>
  </div>
</template>
<script>
import axios from "axios";
import http from "../api";
export default {
  data() {
    return {
      linput1: [],
      linput2: [],
      // formInline: {
      //   name: "",
      //   time: "",
      // },
      //搜索输入框
      formInline: {
        company_id:"",
        type_id:""
      },
      multipleSelection: [],
      // 分页
      tableData: [], //总数居
      currPage: 1, //当前页
      pageSize: 5, //每页数据量
      currList: [], //当前展示的数据数组
    };
  },
  methods: {
    // 培训管理新增
    addpx() {
      this.$router.push({
        name: "培训管理新增",
      });
    },
    // 新增
    Newadditions() {
      this.$router.push({
        name: "项目班组新增",
      });
    },
    // 分页
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
      // console.log('当前页',index);
    },
    //改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      // console.log(val);
    },

    //重置按钮
    resetForm(formName) {
       for (let key in formInline) {
        formInline[key] = "";
      }
      // this[formName] = {};
      // this.$refs[formName].resetFields();
    },
     reset(formName){
   for (let key in this.formInline) {
       this.formInline[key] = "";
     }
 },
    //表格编辑按钮
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push({
        name: "培训管理编辑",
        params: row,
      });
    },
    // 表格删除按钮弹框
    handleDelete(index, row) {

      
      // this.tableData.splice((this.currPage - 1) * 6 + index, 1);
      // if (this.currList.length === 1) {
      //   this.currPage--;
      //   this.setCurrList(this.currPage);
      // } else {
      //   this.setCurrList(this.currPage);
      // }
    },
    //选中复选框获取下标
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      // let ids = [];
      // this.multipleSelection.map((item) => {
      //   ids.push(item.key);
      // });
      // this.selectedIDs = ids;
      // console.log("你点击的是", this.selectedIDs);
    },
    //搜索输入

    //  {
    //      "buildCompany":{
    //          "company_id":"1"
    //      },
    //      "buildTrainType":{
    //          "type_id":"3"
    //      }

    // }
    search(formInline) {
      let obj = {
        buildCompany: {
          company_id: this.formInline.company_id,
        },
        buildTrainType: {
          type_id: this.formInline.type_id,
        },
      };
      // console.log('搜索的结果',obj)
      // console.log('搜索的结果',this.formInline);
      http.ryglpeitable(obj).then((res) => {
        this.tableData = res.data;
        console.log("搜索返回的结果", res.data);
        this.setCurrList(1);
      });
    },

    //批量删除
    del() {
      for (let s = 0; s < this.multipleSelection.length; s++) {
        for (let x = 0; x <= this.tableData.length; x++) {
          if (this.multipleSelection[s] === this.tableData[x]) {
            this.tableData.splice(x, 1);
            console.log(x, 1);
          }
        }
      }
    },
  },
  mounted() {
    http.ryglpeitable({}).then((res) => {
      this.tableData = res.data;
      console.log("培训表格", res.data);
      this.setCurrList(1);
    });
    http.ryglpeiinput1({}).then((res) => {
      console.log("公司名称", res.data);
      this.linput1 = res.data; //公司名称
    });
    http.ryglpeiinput2({}).then((res) => {
      this.linput2 = res.data; // 培训种类
      console.log("培训种类", res.data);
    });
  },
};
</script>
<style scoped>
.f-con {
  width: 98%;
  height: 645px;
  overflow-y: scroll;
  /* overflow: hidden; */
  background-color: white;
  /* float: left; */
  margin-top: 15px;
  position: relative;
  /* margin-left: 15px; */
}
.l-margin {
  margin-left: 30px;
  margin-top: 10px;
}

.rygl-btn-right {
  margin-right: 25px;
}
.f-zi {
  width: 100px;
  height: 30px;
  font-size: 17px;
  font-weight: 700;
  margin-top: 20px;
     color: #222;
  /* margin-left: 10px; */
}
.f-inp1 {
  /* width: 800px; */
  width: 100%;
  height: 40px;
  /* margin-top: 10px; */
  /* margin-left: 10px; */
  line-height: 30px;
  /* display: flex; */
}
/* 第一个input框 */
.el-select >>> .el-input__inner {
  height: 30px;
  display: inline-block;
  padding-left: 5px;
}
/* 按钮 */
.el-button {
  height: 30px;
  padding: 7px 15px;
}
.rygl-btn {
  margin-top: 10px;
  width: 100%;
  /* margin-top: 10px; */
  display: flex;
  justify-content: space-between;
}
.l-input {
  width: 100%;
  height: 40px;
}
.f-fenye {
  /* float: right;
  margin-top: 15px;
  margin-right: 15px; */
  position: absolute;
  bottom: 5px;
  right: 1%;
}
.l-pei-biao {
  width: 98%;
  margin-top: 10px;
}
</style> 